<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Visible</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .visible{
      margin: 0 auto;
      margin-top: 50px;
      position: relative;
      width: 100px;
      height: 200px;
      border: 1px solid red;
    }
    .visible>div{
      width: 50px;
      height: 50px;
      border: 1px solid gray;
      opacity: .5;
      font-size: 12px;
    }
    .visible>div:nth-child(2){
      visibility: hidden;
    }
    .overflow{
      width: 200px;
      height: 100px;
      border: 1px solid red;
      font-size: 12px;
      overflow: auto;
    }
    .width{
      width: 200px;
      height: 100px;
      border: 1px solid red;
      font-size: 12px;
    }
    .width>p{
      width: 150px;
      height: 20px;
      border: 1px solid red;
    }
    .width>span{
      width: 150px;
      height: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="visible">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    visible
  </div>
  <div class="overflow">
    对溢出内容不做处理，内容可能会超出容器。
    hidden：
    隐藏溢出容器的内容且不出现滚动条。
    scroll：
    隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
    auto：
    当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。
  </div>
  <div class="width">
    I am width for div
    <p>i am width for "p"</p>
    <span>i am width for "span"</span>
    <a href="">a标签</a>
    <em>em标签</em>
    <i>i标签</i>
  </div>
</body>
</html>